<template>
    <d2-container :filename="filename">
        <template slot="header">
            <el-form
                    :inline="true"
                    :model="queryParam"
                    ref="form"
                    size="mini"
                    style="margin-bottom: -18px;">
                <el-form-item>
                    <el-button type="primary" icon="el-icon-plus" @click="add">添加</el-button>
                </el-form-item>

                <el-form-item>
                    <el-button type="danger" icon="el-icon-delete"
                               v-if="displayBatchDeleteBtn"
                               @click="handleBatchDelete">批量删除
                    </el-button>
                </el-form-item>
            </el-form>
        </template>
        <!--table-->
        <el-table v-loading="listLoading" :data="tableData"
                  :stripe="true"
                  @selection-change="handleSelectionChange"
                  border fit highlight-current-row style="width: 100%;">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column label="编号" min-width="180" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="类型名称" min-width="200" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                </template>
            </el-table-column>

            <el-table-column label="属性数量" width="120" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.attr_count }}</span>
                </template>
            </el-table-column>

            <el-table-column label="参数数量" width="120" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.param_count }}</span>
                </template>
            </el-table-column>

            <el-table-column label="排序值" width="120" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.sorted }}</span>
                </template>
            </el-table-column>

            <el-table-column label="设置" width="240" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" plain icon="el-icon-tickets"
                               @click="goto(scope.row.id, 'SPEC')"
                               type="warning">规格列表
                    </el-button>
                    <el-button size="mini" plain icon="el-icon-tickets"
                               @click="goto(scope.row.id, 'PARAM')"
                               type="warning">参数列表
                    </el-button>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="240" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" icon="el-icon-edit"
                               @click="edit(scope.row)"
                               type="primary">编辑
                    </el-button>

                    <el-button size="mini" icon="el-icon-delete"
                               @click="handleDelete(scope.row.id)"
                               type="danger">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <template slot="footer">
            <pagination v-show="total>0"
                        :total="total"
                        :page.sync="queryParam.current"
                        :limit.sync="queryParam.size"
                        @pagination="getList"/>
        </template>
        <el-dialog
                :title=textMap[dialogStatus]
                :visible.sync="dialogVisible">
            <el-form ref="rechargeForm" :model="attrCate" label-width="120px">
                <el-form-item label="菜单编号" prop="id" v-if="dialogStatus !== 'save'">
                    <el-input v-model="attrCate.id"
                              :disabled="dialogStatus !== 'create'">
                    </el-input>
                </el-form-item>

                <el-form-item label="类型名称" prop="name">
                    <el-input v-model="attrCate.name"
                              placeholder="请输入类型名称">
                    </el-input>
                </el-form-item>

                <el-form-item label="排序权重" prop="sorted">
                    <el-input v-model="attrCate.sorted"
                              placeholder="默认值为999">
                    </el-input>
                </el-form-item>

                <el-form-item v-if="dialogStatus === 'update'">
                    <el-button type="primary" @click="update" icon="el-icon-check">确认更新</el-button>
                    <el-button @click="onCancel" icon="el-icon-close">取消</el-button>
                </el-form-item>

                <el-form-item v-if="dialogStatus === 'save'">
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="save">确认添加</el-button>
                    <el-button @click="onCancel" icon="el-icon-close">取消</el-button>
                </el-form-item>

            </el-form>

        </el-dialog>
    </d2-container>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import { batchDeleteAttrCate, deleteAttrCate, page, saveAttrCate, updateAttrCate } from '@/api/goods/attr'

  export default {
    name: 'goods-cate-attr',
    components: {
      Pagination
    },
    data () {
      return {
        filename: __filename,
        total: 0,
        queryParam: {
          current: 1,
          size: 10
        },
        listLoading: false,
        tableData: [],
        dialogVisible: false,
        dialogStatus: 'save',
        textMap: {
          update: '编辑属性类别',
          save: '创建新的属性类别'
        },
        attrCate: {
          id: undefined,
          name: undefined,
          sorted: 999
        },
        selectedRows: [],
      }
    },
    created () {
      this.getList()
    },
    computed: {
      displayBatchDeleteBtn: function () {
        return this.selectedRows.length > 0
      }
    },
    methods: {
      getList () {
        this.listLoading = true
        page(this.queryParam).then(res => {
          this.tableData = res.records
          this.total = parseInt(res.total)
          this.listLoading = false
        })
      },
      handleSelectionChange (rows) {
        this.selectedRows = rows
      },
      goto (id, type) {
        this.$router.push('/goods/attr/list?cid=' + id + '&type=' + type)
      },
      update () {
        updateAttrCate(this.attrCate).then(res => {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: '更新【' + this.attrCate.name + '】成功',
            type: 'success'
          })
        })
      },
      save () {
        saveAttrCate(this.attrCate).then(() => {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: '添加【' + this.attrCate.name + '】成功',
            type: 'success'
          })
        })
      },
      edit (row) {
        this.attrCate = row
        this.dialogVisible = true
        this.dialogStatus = 'update'
      },
      add () {
        this.resetAttrCate()
        this.dialogVisible = true
        this.dialogStatus = 'save'
      },
      handleDelete (id) {
        this.$confirm('此操作将永久删除该类型,是否继续?', '友情提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteAttrCate(id).then(res => {
            if (res) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else {
              this.$message({
                type: 'warning',
                message: '删除失败'
              })
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleBatchDelete () {
        let ids = this.selectedRows.map(e => e.id).join(',')
        this.$confirm('此操作将永久删除该类型,是否继续?', '友情提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          batchDeleteAttrCate(ids).then(res => {
            if (res) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else {
              this.$message({
                type: 'warning',
                message: '删除失败'
              })
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      resetAttrCate () {
        this.attrCate = {
          id: undefined,
          name: undefined,
          sorted: 999
        }
      },
      onCancel () {

      }
    }
  }
</script>

<style scoped>

</style>
